/* ◆公共样式 */
* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
}

ul {
		float: left;
		margin: 10px 0 0 10px;
		width: 80px;
		height: 100px;
		background-color: #ccc;
		border-radius: 5px;
}

li {
		list-style: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: red;
}

/* ◆一饼 */
/* .ul1 {
		display: flex;
		justify-content: center;
}
.ul1>li {
		align-self: center;
} */
        
/* ◆方法2 */
.ul1 {
		display: flex;
		justify-content: center;
		align-items: center;
}

/* ◆二饼 */
.ul2  {
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 align-items: center;
}

/* ◆三饼 */
.ul3 {
		display: flex;
		flex-direction: column; 
		justify-content: space-between; 
		padding: 5px;
}
.ul3 li:nth-child(2) {
		align-self: center;
}
.ul3 li:nth-child(3) {
		align-self: flex-end;
}

/* ◆四饼 */
.ul4  {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
}
.ul4 li {
		margin:15px 10px;
}

/* ◆五饼 */
.ul5 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
}
.ul5 li:nth-child(3) {
		margin: 0 30px;
}

/* ◆六饼 */
.ul6 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: center;
}
.ul6 li {
		margin: 0 10px;
}

/* ◆七饼 */


/* ◆八饼 */
/* ◆方法1：紧凑一些 */
/* .ul8 {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 padding: 10px 20px;
} */
       
/* ◆方法2：松弛一些*/
.ul8 {
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
}
.ul8 li {
	 margin: 0 10px;
}

/* ◆九饼 */
/* ◆方法1：紧凑一些 */
/* .ul9 {
	 display: flex;
	 flex-wrap: wrap;
	 padding: 10px;
	 align-items: center;
} */
/* ◆方法法2：松弛一些 */
.ul9 {
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: space-around;
	 align-items: center;
	 padding: 5px;
}